import React, { useEffect, useState } from 'react';
import { Button, message,Popconfirm, Space, Table } from 'antd';
import '../components.css'
import ProductService from '../../services/ProductService'
import { Link } from 'react-router-dom';
import { DeleteOutlined, UpCircleOutlined } from '@ant-design/icons';



export default function ProductList() {

  const [products, setProducts] = useState([])


  const getAllProducts = () => {
    ProductService.getAllProducts().then((response) => {
      setProducts(response.data);
      // console.log(response)
    }).catch(error => {
      console.log(error);
    })
  }

  useEffect(() => {
    getAllProducts();
  }, [])

  const deleteProduct = (p) => {
    console.log(p);
    message.success('Delete Success!');
    setTimeout(() => {
      ProductService.deleteProduct(p).then(response => {
        getAllProducts();
      }).catch(error => {
        console.log(error);
      })
    }, 500);
  }

  const cancel = (p) => {
    console.log(p);
    message.error('Delete Failed!');
  };



  const columns = [
    {
      title: 'Product Id',
      dataIndex: 'f1',
      key: "f1",
      align: 'center',
    },

    {
      title: 'Product Name',
      dataIndex: 'f2',
      key: "f2",
      align: 'center',
    },
    {
      title: 'Product Time',
      dataIndex: 'f3',
      key: "f3",
      align: 'center',
    },

    {
      title: 'Product Number',
      dataIndex: 'f4',
      key: "f4",
      align: 'center',
    },
 
    // {
    //   title: 'Product Number',
    //   dataIndax: 'f4',
    //   key: "f4",
    //   align: 'center',
    // },

    {
      title: 'Product Type',
      dataIndex: 'f5',
      key: "f5",
      align: 'center',
    },
    // {
    //   title: 'Product Type',
    //   dataIndax: 'f5',
    //   key: "f5",
    //   align: 'center',
    // },
    {
      title: 'Product Quantity',
      dataIndex: 'f6',
      key: "f6",
      align: 'center',
    },
    // {
    //   title: 'Product Quantity',
    //   dataIndax: 'f6',
    //   key: "f6",
    //   align: 'center',
    // },
    {
      title: 'Product Company',
      dataIndex: 'f7',
      key: "f7",
      align: 'center',
    },
    // {mnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
    //   title: 'Product Company',
    //   // title: 'f7',
    //   dataIndax: 'f7',
    //   key: "f7",
    //   align: 'center',
    // },

    {
      title: 'Actions',
      key: 'actions',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          <Button type='primary' icon={<UpCircleOutlined />} >
            <Link to={"updateproduct/" + record.key} style={{ color: "white", paddingLeft: "9px" }}>Update</Link>
          </Button>

          <Popconfirm
            title="Are you sure to delete?"

            onConfirm={() => deleteProduct(record.key)}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <Button type='danger' icon={<DeleteOutlined />}>Delete</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const data = products.map((product) => {
    console.log(product)
    return {
      key: product.id,
      f1: product.id,
      f2: product.productName,
      f3: product.productTime,
      f4: product.productNumber,
      f5: product.productType,
      f6: product.productQuality,
      f7: product.productCompany,
    }
  })


  return (
    <div className='emplst'>
      <div className="title" >List Product </div>
      <Table columns={columns} dataSource={data} bordered={true} />
    </div>)
}
